<template>

  <router-link tag="div" class="mini-article" :to="{name: 'ArticleDisplay', 
    params: { articleId: articleInfo.id}}
  ">
    <div class="one-side">
      <div class="article-cover" :style="{backgroundImage: `url(${articleInfo.cover_url})`}"></div>
    </div>

    <div class="other-side">
      <div class="main-tag">
        {{articleInfo.functionality_model.name}}
      </div>
      <h3 class="article-headline">
        {{articleInfo.headline}}
      </h3>
      <div class="article-outline">
        {{articleInfo.outline}}
      </div>
      <div class="author flex">
        <router-link tag="div" class="author-portrait" 
          :style="{backgroundImage: `url(${articleInfo.user_model.avatar_url})`}"
          :to="{name: 'PreviewUser', query:{vertify: articleInfo.user_model.nickname}}"
        ></router-link>
        <!-- <div class="author-portrait" :style="{backgroundImage: `url(${articleInfo.user_model.avatar_url})`}"></div> -->
        <div class="author-att">
          <div class="author-name">{{articleInfo.user_model.nickname}}</div>
          <div class="article-create-time">{{articleInfo.create_time | timeStrToDate | dateTotoLocaleDateStr}}</div>
        </div>
      </div>
    </div>
  </router-link>
</template>

<script>
  export default {
    name: 'MiNiArticle',
    props: ['articleInfo'],
  }
</script>

<style lang="less">
  @import url('./mini_article.less');
</style>